{include file="header/index" /}
<!--//laypage翻页需要 start-->
<script type="text/javascript" src="__JS__/layer/layer.js"></script>
<script type="text/javascript" src="__JS__/laypage/laypage.js"></script>
<script type="text/javascript" src="__JS__/laytpl/laytpl.js"></script>
<script type="text/javascript" src="__JS__/info.js"></script>
<link rel="stylesheet" href="__CSS__/laypage.css" />
<!--//laypage翻页需要 end-->

<meta charset="UTF-8">
<link rel="stylesheet" href="__JS__/layui/css/layui.css" />
<style>
    .form-control {
        height: 33px;
    }
    .size100{
        width: 100px !important;
        height: 100px !important;

    }
    .shuffling_pic{
        margin: 10px;
    }
    .enclosureitem i{
        width: 20px;
        height: 20px;
        line-height: 20px !important;
        text-align: center;
        color:red;
        border: 1px solid red;
    }
</style>

<body>
<div class="container privilegeUserList pb40 whitebg">
    <div class="newContent clearFlex padding0">
        <form class="form-inline mt15 mb15"  action="{:url('Config/settingTdsList')}" method="post">
            <div class="newForm">
                <div class="newGroup">
                    <div class="newLabel inputText">城市</div>
                    <div class="newGroupInput">
                        <input type="text" name="key" id="key" placeholder="输入查询的城市" value="{$vals}">
                    </div>
                </div>	
                <div class="newGroup newBtnBox">
                    <button class="btn btn-primary input-Btn mr10 newBtnDefault newBtnPrimary">搜索</button>
                    <button type="button" id="reset" class="btn btn-success input-Btn newBtnDefault">重置</button>
                </div>
            </div>
        </form>
    </div>

    <!-- 分割部分 -->
    <div class="newDivision"></div>

    <!-- 配件列表 及按钮 -->
    <div class="newPart">
        <div class="newContent clearFlex padding0">
            <div class="newOne">
                <div class="col-sm-2 newListTitle">城市TDS列表</div>
                <div class="col-sm-10">
                    <button type="button" class="btn btn-default input-Btn fr newBtnDefault newBtnGray mt10 ml10" onclick="refresh()"><i class="fa fa-undo"></i>刷新</button>
                    <div class="btn btn-primary fr add_newuser input-Btn newBtnDefault newBtnPrimary mt10 ml10" id="addBtn" onclick="partsAdd()"><i class="glyphicon glyphicon-plus"></i>&nbsp;&nbsp;添加TDS</div>
                </div>
            </div>
        </div>
    </div>

    <div class="table-responsive">
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>省</th>
                <th>市</th>
                <th>区</th>
                <th>TDS</th>
                <th>操　　作</th>
            </tr>
            </thead>
            <script id="list-template" type="text/html">
                <tr>
                    {{# for(var i=0;i<d.length;i++){ }}
                    <td>{{d[i].p_name}}</td>
                    <td>{{d[i].c_name}}</td>
                    <td>{{d[i].a_name}}</td>
                    <td>{{d[i].tds}}</td>
                    <td>
                        <a class="btn btn-success btn-xs newBtnDefault" onclick="update({{d[i].id}});"> 编辑</a>&nbsp;&nbsp;
                    </td>
                </tr>{{# } }}
            </script>
            <tbody id="list-content"></tbody>
        </table>
    </div>
    <div class="clearfix" style="float:right;margin: 0 auto;">
        <span class="fl mr20 mt5">共{$count}条数据</span><span id="allpage" class="fl  mr20 mt5"></span><span class="fl" id="AjaxPage"></span>
    </div>
    <!-- 加载动画 -->
    <div class="spiner-example">
        <div class="sk-spinner sk-spinner-three-bounce">
            <div class="sk-bounce1"></div>
            <div class="sk-bounce2"></div>
            <div class="sk-bounce3"></div>
        </div>
    </div>
</div>
</body>

<script type="text/javascript" src="__JS__/layui/layui.js"></script>
<script>
    //刷新
    function refresh(){
        layer.load(2);
        Ajaxpage();
    }
    // 重置搜索
    $("#reset").click (function () {
        $("#key").val('');
        Ajaxpage();
    });
    //laypage分页
    Ajaxpage();

    function Ajaxpage(curr) {
        var key = $('#key').val();
        $.getJSON('{:url("Config/settingTdsList")}', {
            page: curr || 1,
            key: key
        }, function(data) {
            $(".spiner-example").css('display', 'none'); //数据加载完关闭动画
            layer.closeAll('loading');
            if(data == '') {
                $("#list-content").html('<td colspan="20" style="padding-top:10px;padding-bottom:10px;font-size:16px;text-align:center">暂无数据</td>');
            } else {
                var tpl = document.getElementById('list-template').innerHTML;
                laytpl(tpl).render(data, function(html) {
                    document.getElementById('list-content').innerHTML = html;
                });
                laypage({
                    cont: $('#AjaxPage'), //容器。值支持id名、原生dom对象，jquery对象,
                    pages: '{$allpage}', //总页数
                    skip: true, //是否开启跳页
                    skin: '#1AB5B7', //分页组件颜色
                    curr: curr || 1,
                    groups: 3, //连续显示分页数
                    jump: function(obj, first) {
                        if(!first) {
                            Ajaxpage(obj.curr)
                        }
                        $('#allpage').html('，第' + obj.curr + '页，共' + '<i>' + obj.pages + '</i>' + '页');
                        inputlength();
                    }
                });
            }
        });
    }
    //更新
    function update(id) {
        location.href = "{:url('Config/editTds')}?id=" + id;
    }
    function partsAdd() {
        location.href = "{:url('Config/addTds')}"
    }

</script>

</html>